<div class="da-content-wrapper">
  <d-row [dGutter]="[12, 12]">
    <d-col [dSpan]="6">
      <d-card>
        <d-card-header>
          <d-card-title>{{ 'studio.databoard.projectCnt' | translate }}</d-card-title>
        </d-card-header>
        <div class="indicator-card-content">{{ projectCnt }}</div>
      </d-card>
    </d-col>
    <d-col [dSpan]="6">
      <d-card>
        <d-card-header>
          <d-card-title>{{ 'studio.databoard.clusterCnt' | translate }}</d-card-title>
        </d-card-header>
        <div class="indicator-card-content">{{ clusterCnt }}</div>
      </d-card>
    </d-col>
    <d-col [dSpan]="6">
      <d-card>
        <d-card-header>
          <d-card-title>{{ 'studio.databoard.realtimeJobCnt' | translate }}</d-card-title>
        </d-card-header>
        <div class="indicator-card-content">{{ realtimeJobCnt }}</div>
      </d-card>
    </d-col>
    <d-col [dSpan]="6">
      <d-card>
        <d-card-header>
          <d-card-title>{{ 'studio.databoard.batchJobCnt' | translate }}</d-card-title>
        </d-card-header>
        <div class="indicator-card-content">{{ batchJobCnt }}</div>
      </d-card>
    </d-col>
  </d-row>

  <d-row [dGutter]="[12, 12]">
    <d-col [dSpan]="12">
      <d-card style="height: 670px">
        <d-card-header>
          <d-card-title>{{ 'studio.databoard.batchTop100In7d' | translate }}</d-card-title>
        </d-card-header>
        <d-data-table
          [dataSource]="batchTop100"
          [fixHeader]="true"
          tableHeight="90%"
          [scrollable]="true"
          [type]="'striped'"
          [tableLayout]="'fixed'"
          [resizeable]="true"
        >
          <d-column field="project" header="{{ 'studio.databoard.project' | translate }}" [width]="'120px'" [fixedLeft]="'0px'">
            <d-cell>
              <ng-template let-cellItem="cellItem">{{ cellItem?.projectCode }}</ng-template>
            </d-cell>
          </d-column>
          <d-column field="jobCode" header="{{ 'studio.databoard.jobCode' | translate }}" [width]="'200px'" [fixedLeft]="'120px'">
            <d-cell>
              <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
            </d-cell>
          </d-column>
          <d-column field="duration" header="{{ 'studio.databoard.duration' | translate }}" [width]="'100px'">
            <d-cell>
              <ng-template let-cellItem="cellItem">{{ cellItem / 1000 }}</ng-template>
            </d-cell>
          </d-column>
          <d-column field="startTime" header="{{ 'studio.databoard.startTime' | translate }}" [width]="'180px'">
            <d-cell>
              <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
            </d-cell>
          </d-column>
          <d-column field="endTime" header="{{ 'studio.databoard.endTime' | translate }}" [width]="'180px'">
            <d-cell>
              <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
            </d-cell>
          </d-column>
          <d-column field="jobInstanceState" header="{{ 'studio.databoard.jobInstanceState' | translate }}" [width]="'100px'">
            <d-cell>
              <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
            </d-cell>
          </d-column>
        </d-data-table>
      </d-card>
    </d-col>
    <d-col [dSpan]="12">
      <d-card style="height: 670px">
        <d-card-header>
          <d-card-title>{{ 'studio.databoard.realtimeJobRuntimeStatus' | translate }}</d-card-title>
        </d-card-header>
        <d-echarts [options]="pieData" height="90%" width="90%" (chartReady)="getPieChart($event)"></d-echarts>
      </d-card>
    </d-col>
  </d-row>
</div>
